//考勤记录

import React, { useState } from 'react';
import { Layout, Table, Modal, Form, Input, Button, Space,Card } from 'antd';

const { Header, Content, Footer } = Layout;

const Attendance = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();
  const [data, setData] = useState([
    {
      key: '1',
      studentName: '张三',
      attendance: '出勤',
    },
    {
      key: '2',
      studentName: '李四',
      attendance: '缺勤',
    },
    {
      key: '3',
      studentName: '王五',
      attendance: '出勤',
    },
  ]);

  const showModal = () => {
    setModalVisible(true);
  };

  const handleCancel = () => {
    setModalVisible(false);
  };

  const handleSave = () => {
    form.validateFields()
      .then(values => {
        console.log('Received values:', values);
        form.resetFields();
        setModalVisible(false);
        const newData = [...data, { key: data.length + 1, ...values }];
        setData(newData);
      })
      .catch(errorInfo => {
        console.log('Validation Failed:', errorInfo);
      });
  };

  const handleDelete = key => {
    const newData = data.filter(item => item.key !== key);
    setData(newData);
  };

  const columns = [
    {
      title: '学员姓名',
      dataIndex: 'studentName',
      key: 'studentName',
    },
    {
      title: '考勤记录',
      dataIndex: 'attendance',
      key: 'attendance',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button onClick={() => handleDelete(record.key)}>删除</Button>
        </Space>
      ),
    },
  ];

  return (
    <Layout>
      <Header style={{ color: 'white' }}>考勤记录</Header>
      <Content style={{ padding: '10 50px' }}>
        {/* <div style={{ background: '#fff', padding: 24, minHeight: 280 }}> */}
        <div>
          <Button type="primary" onClick={showModal} style={{ marginBottom: '16px' }}>
            添加考勤记录
          </Button>
          <Table columns={columns} dataSource={data} />
        </div>
        <Card className='Logo1'>
        <div style={{position:'relative',top:'5px',left:'300px'}}>驾校管理系统&copy;2024-2099</div>
        </Card>
      </Content>
      {/* <Footer>
     <div style={{position:'absolute',left:'50%'}}>驾校管理系统&copy;2024-2099</div>
   </Footer> */}
      <Modal
        title="添加考勤记录"
        visible={modalVisible}
        onCancel={handleCancel}
        footer={[
          <Button key="cancel" onClick={handleCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={handleSave}>
            保存
          </Button>,
        ]}
      >
        <Form form={form} layout="vertical" initialValues={{}}>
          <Form.Item label="学员姓名" name="studentName" rules={[{ required: true, message: '请输入学员姓名' }]}>
            <Input />
          </Form.Item>
          <Form.Item label="考勤记录" name="attendance" rules={[{ required: true, message: '请选择考勤记录' }]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </Layout>
  );
};

export default Attendance;